import { Navigate, Outlet, useLocation } from "react-router-dom"
import { useAppDispatch } from '@/store/hooks'
import { isAuth } from "@/utils/token"

type Props = {
    // 子节点， ReactElement 表示 React 元素
    children?: React.ReactElement
}

const AuthRoute = ({ children }: Props) => {
    const location = useLocation()
    const dispatch = useAppDispatch()
    
  // 1 判断是否登录
  const isLogin = isAuth()
  if (isLogin) {
    // 2 如果登录了，就渲染 children
    // 判断是否传入 children 属性
    if (children) {
      // 1 如果传了 children，就直接渲染 children 即可
      return children
    }

    // 2 如果没有传 children，说明是 父子路由嵌套的形式，此时，应该通过 Outlet 组件来指定将子路由渲染在哪
    return <Outlet />
  }

  // 3 如果没有登录，就重定向到登录页面
//   dispatch(logout())
  return (
    <Navigate
      to="/login"
      // state 表示重定向时传入的额外数据，这个数据，可以在登录页面中获取到
      state={{
        from: location.pathname,
      }}
      // 使用路由的 replace 模式，来做路由跳转
      replace
    />
  )
}
export default AuthRoute